<%--
  Created by IntelliJ IDEA.
  User: Honphie.$.Won
  Date: 2023/6/27
  Time: 10:24
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>药品仓储系统</title>
  <script src="./js/vue.js"></script>
  <script src="./elementui/index.js"></script>
  <script src="./js/jquery-3.4.1.min.js"></script>
  <link rel="stylesheet" href="./elementui/theme-chalk/index.css">
  <style>
    .el-menu-vertical-demo:not(.el-menu--collapse) {
      width: 200px;
      min-height: 400px;
    }
    html, body {
      height: 100%;
      width: 100%;
      margin: 0;
      padding: 0;
    }

    #app {
      height: 100%;
      width: 100%;
      display: flex;
      flex-direction: column;
    }

    .header {
      color: rgba(255, 255, 255, 0.75);
      line-height: 60px;
      background-color: #24292e;
      text-align: center;
    }

    .header div {
      display: inline;
    }

    .title {
    }

    .author {
      float: right;
    }

    .author-img {
      width: 20px;
      height: 20px;
    }

    .author-github {
      cursor: pointer;
    }

    .container {
      flex: 1;
      display: flex;
      transition: flex 0.3s ease; /* 添加过渡效果 */
    }

    .sidebar {
      width: 200px;
      min-height: 400px;
      /*background-color: #f0f0f0;*/
    }

    .sidebar-collapsed .container {
      flex: 0 0 60px; /* 侧边栏收起时的宽度 */
    }

    .sidebar-expanded .container {
      flex: 0 0 200px; /* 侧边栏展开时的宽度 */
    }

    .main {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .main-content {
      flex: 1;
      padding: 0;
    }

    .iframe {
      width: 100%;
      height: 100%;
      border: 0;
    }
    .author-github {
      cursor: pointer;
    }
    .author {
      float: right;
      margin-right: 20px;
    }

    .el-dropdown-link {
      cursor: pointer;
      color: #409EFF;
    }
    .el-icon-arrow-down {
      font-size: 12px;
    }
  </style>
</head>
<body>
<div id="app">
  <div class="header">
    <div class="title">
      <span>XMX药品管理系统</span>
    </div>
    <div  class="author">

      <el-dropdown class="el-icon-user-solid author-github">
        <span class="el-dropdown-link">
          {{username}}<i class="el-icon-arrow-down el-icon--right"></i>
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item id="AboutMain">关于我</el-dropdown-item>
          <el-dropdown-item id="Logout">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>


  </div>
  <div class="container" :class="{ 'sidebar-expanded': !isCollapse, 'sidebar-collapsed': isCollapse }">
    <div class="sidebar">
      <el-radio-group style="margin-bottom: 20px;" v-model="isCollapse">
        <el-radio-button :label="false">展开</el-radio-button>
        <el-radio-button :label="true">收起</el-radio-button>
      </el-radio-group>
      <el-menu default-active="1" :collapse="isCollapse" class="el-menu-vertical-demo">
        <el-menu-item index="1" @click="open('Admin.jsp')" v-if="isAdminVisible">
          <i class="el-icon-location"></i>
          <span slot="title">账号管理</span>
        </el-menu-item>
        <el-menu-item index="2">
          <i class="el-icon-location"  @click="open('medc-list.jsp')"></i>
          <span slot="title">药品管理</span>
        </el-menu-item>
        <el-menu-item index="3">
          <i class="el-icon-location"  @click="open('supplier.jsp')"></i>
          <span slot="title">供应商管理</span>
        </el-menu-item>
        <el-menu-item index="4">
          <i class="el-icon-location"  @click="open('import.jsp')"></i>
          <span slot="title">入库管理</span>
        </el-menu-item>
        <el-menu-item index="5">
          <i class="el-icon-location"  @click="open('export.jsp')"></i>
          <span slot="title">出库管理</span>
        </el-menu-item>
      </el-menu>
    </div>
    <div class="main">
      <el-main class="main-content">
        <iframe :src="iframeUrl" frameborder="0" class="iframe"></iframe>
      </el-main>
    </div>
  </div>
</div>
<script>
  var vue = new Vue({
    el: "#app",
    data: {
      iframeUrl: "medc-list.jsp",
      isCollapse: true,
      username: "XMX",
      uid:0,
      isAdminVisible: false
    },
    methods: {
      open(url) {
        this.iframeUrl = url;console.log(url);
      },
      getUid(){
        var _this = this;
        $.ajax({
          url:"Admins_AccountsServlet?tag=getUser",
          dataType:"json",
          success:function (data) {
            _this.uid = data[0];
            _this.username = data[1];
          },
          err: function () {
            console.log("获取用户信息失败");
          },
          complete: function () {
            $.get("Admins_AccountsServlet?tag=getUserRole",{uid:_this.uid},function (data) {
              _this.isAdminVisible = data;
              if(data){
                _this.iframeUrl = "Admin.jsp";
              }
            });
          }
        })
      }
    },
    created() {
      this.getUid();
    }
  });
  $("#AboutMain").click(function () {
    vue.iframeUrl = "UpdateAdmin.jsp?id="+vue.uid;
  });
    $("#Logout").click(function () {
        $.ajax({
        url:"Admins_AccountsServlet?tag=Logout",
        success:function () {
            window.location.href = "Login.jsp";
        },
        err:function () {
            console.log("退出失败");
        }
        })
    });
</script>
</body>
</html>


